<div class="container container-height100">
    <div class="login">
        <form class="find-box p-50 center-block" [formGroup]="registerForm" (ngSubmit)="register()">
            <div class="clearfix find-row">
                <div class="w-100 text-right pull-left"><small>手机号：</small></div>
                <div class="pull-left po-r form-group" [class.has-error]="(registerForm.hasError('phoneNumber','PhoneNumber') && registerForm.get('PhoneNumber').touched) || phoneNumberUsed">
                    <input type="text" class="form-control" placeholder="请输入手机号" formControlName="PhoneNumber" (blur)="isPhoneNumberUsed()">
                    <em [hidden]="registerForm.hasError('required','PhoneNumber')" class="form-group-del" (click)="clear('PhoneNumber')"></em>
                </div>
                <div class="login-tips" *ngIf="registerForm.hasError('phoneNumber','PhoneNumber') && registerForm.get('PhoneNumber').touched">
                    <em class="login-tips-warn"></em> {{registerForm.getError('phoneNumber','PhoneNumber')?.desc}}
                </div>
                <div class="login-tips" *ngIf="phoneNumberUsed && !registerForm.hasError('phoneNumber','PhoneNumber')">
                    <em class="login-tips-warn"></em> 手机号已被注册
                </div>
            </div>
            <div class="clearfix find-row">
                <div class="w-100 text-right pull-left"><small>短信验证码：</small></div>
                <div class="pull-left po-r form-group" [class.has-error]="(registerForm.hasError('required','VerificationCode') && registerForm.get('VerificationCode').touched) || error.indexOf('验证码') !== -1">
                    <div class="col-md-6">
                        <div class="row">
                            <input type="text" class="form-control verification " id="exampleInputPassword1" placeholder="输入短信验证码" formControlName="VerificationCode">
                            <em [hidden]="registerForm.hasError('required','VerificationCode')" class="form-group-del" (click)="clear('VerificationCode')"></em>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row" style="padding-left:15px;">
                          <button class="verification btn" type="button" [disabled]="registerForm.hasError('phoneNumber','PhoneNumber') || phoneNumberUsed || countTime !== 0" (click)="requestVerificationCodeForRegister()">{{countTime !== 0 ? countTime : '获取验证码'}}</button>
                        </div>
                    </div>
                </div>
                <div class="login-tips" *ngIf="registerForm.hasError('required','VerificationCode') && registerForm.get('VerificationCode').touched">
                    <em class="login-tips-warn"></em> 请输入验证码
                </div>
            </div>
            <div class="clearfix find-row">
                <div class="w-100 text-right pull-left"><small>密码：</small></div>
                <div class="pull-left po-r form-group" [class.has-error]="(registerForm.hasError('required','Password') || registerForm.hasError('pattern','Password')) && registerForm.get('Password').touched">
                    <input type="password" class="form-control" placeholder="6-11位密码，区分大小写" formControlName="Password">
                    <em [hidden]="registerForm.hasError('required','Password')" class="form-group-del" (click)="clear('Password')"></em>
                </div>
                <div class="login-tips" *ngIf="registerForm.hasError('required','Password') && registerForm.get('Password').touched">
                    <em class="login-tips-warn"></em> 请输入密码
                </div>
                <div class="login-tips" *ngIf="registerForm.hasError('pattern','Password') && registerForm.get('Password').touched">
                    <em class="login-tips-warn"></em> 格式错误，6-11位密码，区分大小写
                </div>
            </div>
            <div class="clearfix find-row">
                <div class="w-100 text-right pull-left"><small>确认密码：</small></div>
                <div class="pull-left po-r form-group" [class.has-error]="(registerForm.hasError('required','PasswordConfirm') || registerForm.hasError('mismatch')) && registerForm.get('PasswordConfirm').touched">
                    <input type="password" class="form-control" placeholder="再次输入密码" formControlName="PasswordConfirm">
                    <em [hidden]="registerForm.hasError('required','PasswordConfirm')" class="form-group-del" (click)="clear('PasswordConfirm')"></em>
                </div>
                <div class="login-tips" *ngIf="registerForm.hasError('required','PasswordConfirm') && registerForm.get('PasswordConfirm').touched">
                    <em class="login-tips-warn"></em> 请再次输入密码
                </div>
                <div class="login-tips" *ngIf="registerForm.hasError('mismatch') && registerForm.get('PasswordConfirm').touched">
                    <em class="login-tips-warn"></em> 确认密码与密码不一致
                </div>
            </div>
            <div class="find-row clearfix">
                <div class="login-tips" *ngIf="error">
                    <em class="login-tips-warn"></em> {{error}}
                </div>
                <div class="w-100 pull-left">&nbsp;</div>
                <div class="form-group pull-left">
                    <button *ngIf="!loading" type="submit" class="btn form-control" [disabled]="!registerForm.valid || phoneNumberUsed || error">注册</button>
                    <button *ngIf="loading" type="submit" class="btn form-control" disabled>注册中...</button>
                </div>
            </div>
            <div class="text-center">
                <small>
                点击注册代表同意<a href="javascript:;">&lt;&lt;易实理财用户协议&gt;&gt;</a>
                </small>
            </div>
        </form>
    </div>
</div>
